<template>
  <div>
    <el-dialog
      :title="title"
      :visible="dialogVisible"
      :show-close="false"
      width="1000px"
    >
      <el-form
        ref="orderDialog"
        :model="form"
        label-width="100px"
      >
        <el-row type="flex" justify="space-between">
          <el-col :span="15">
            <el-row>
              <el-col class="order-dialog-title">订单信息</el-col>
            </el-row>
            <el-row style="margin-top: 15px">
              <el-col :span="12">
                <el-form-item label="取车日期:">
                  <el-date-picker
                    v-model="form.picktime"
                    type="datetime"
                    size="medium"
                    placeholder="请选择日期"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="还车日期:">
                  <el-date-picker
                    v-model="form.returntime"
                    type="datetime"
                    size="medium"
                    placeholder="请选择日期"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="取车地区:" prop="pickaddress">
                  <el-input
                    v-model="form.pickaddress"
                    size="medium"
                    placeholder="请输入取车地区"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="还车地区:" prop="returnaddress">
                  <el-input
                    v-model="form.returnaddress"
                    size="medium"
                    placeholder="请输入还车地区"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="配送状态:" prop="delivery">
                  <el-select
                    v-model="form.delivery"
                    placeholder="请选择配送状态"
                  >
                    <el-option value="1" label="用户自提" />
                    <el-option value="0" label="送车上门" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="租车状态:" prop="rentalstate">
                  <el-select
                    v-model="form.rentalstate"
                    placeholder="请选择租车状态"
                  >
                    <el-option value="0" label="婚车" />
                    <el-option value="1" label="自驾" />
                    <el-option value="3" label="商务" />
                    <el-option value="4" label="静展" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="7">
            <el-row>
              <el-col class="order-dialog-title">费用明细</el-col>
            </el-row>
            <el-row style="margin-top: 15px">
              <el-col>
                <el-form-item label="支付方式:" prop="method">
                  <el-select
                    v-model="form.method"
                    placeholder="请选择支付方式"
                  >
                    <el-option value="0" label="银行卡" />
                    <el-option value="1" label="微信" />
                    <el-option value="2" label="支付宝" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="租赁费用:" prop="cost">
                  <el-input
                    v-model="form.cost"
                    size="medium"
                    placeholder="请输入租赁费用"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="押金费用:" prop="deposit">
                  <el-input
                    v-model="form.deposit"
                    size="medium"
                    placeholder="请输入押金费用"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="费用合计:" prop="sumcost">
                  <el-input
                    v-model="form.sumcost"
                    size="medium"
                    placeholder="请输入费用合计"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="15">
            <el-row>
              <el-col class="order-dialog-title">车辆信息</el-col>
            </el-row>
            <el-row style="margin-top: 15px">
              <el-col :span="15">
                <el-form-item label="车辆品牌:" prop="brand">
                  <el-input
                    v-model="form.brand"
                    size="medium"
                    placeholder="请输入车辆品牌"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="15">
                <el-form-item label="车辆编号:" prop="cid">
                  <el-input
                    v-model="form.cid"
                    size="medium"
                    placeholder="请输入车辆编号"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="15">
                <el-form-item label="车牌号:" prop="number">
                  <el-input
                    v-model="form.number"
                    size="medium"
                    placeholder="请输入车牌号"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="15">
                <el-form-item label="车辆类型:" prop="ctype">
                  <el-input
                    v-model="form.ctype"
                    size="medium"
                    placeholder="请输入车辆类型"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="15">
                <el-form-item label="颜色:" prop="color">
                  <el-input
                    v-model="form.color"
                    size="medium"
                    placeholder="请输入颜色"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="7">
            <el-row>
              <el-col class="order-dialog-title">客户信息</el-col>
            </el-row>
            <el-row style="margin-top: 15px">
              <el-col>
                <el-form-item label="客户编号:" prop="pid">
                  <el-input
                    v-model="form.pid"
                    size="medium"
                    placeholder="请输入客户编号"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="客户姓名:" prop="name">
                  <el-input
                    v-model="form.name"
                    size="medium"
                    placeholder="请输入客户姓名"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="证件类型:" prop="document">
                  <el-input
                    v-model="form.document"
                    size="medium"
                    placeholder="请输入证件类型"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="证件号码:" prop="dnumber">
                  <el-input
                    v-model="form.dnumber"
                    size="medium"
                    placeholder="请输入证件号码"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-form-item label="手机号码:" prop="tel">
                <el-input
                  v-model="form.tel"
                  size="medium"
                  placeholder="请输入手机号码"
                />
              </el-form-item>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer">
        <el-button
          @click="handleCancel"
        >
          取 消
        </el-button>
        <el-button
          type="primary"
          @click="handleConfirm"
        >
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'OrderDialog',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      title: '新增订单',
      form: {
        picktime: '',
        returntime: '',
        pickaddress: '',
        returnaddress: '',
        delivery: '',
        rentalstate: '',
        method: '',
        cost: '',
        deposit: '',
        sumcost: '',
        brand: '',
        cid: '',
        number: '',
        ctype: '',
        color: '',
        pid: '',
        name: '',
        document: '',
        dnumber: '',
        tel: ''
      }
    }
  },
  methods: {
    handleCancel() {
      this.$emit('cancel-dialog')
      this.$refs.orderDialog.resetFields()
    },
    handleConfirm() {
      this.$refs.orderDialog.validate((valid) => {
        if (valid) {
          this.$emit('confirm-dialog', {
            picktime: this.form.picktime,
            returntime: this.form.returntime,
            pickaddress: this.form.pickaddress,
            returnaddress: this.form.returnaddress,
            delivery: this.form.delivery,
            rentalstate: this.form.rentalstate,
            method: this.form.method,
            cost: this.form.cost,
            deposit: this.form.deposit,
            sumcost: this.form.sumcost,
            brand: this.form.brand,
            cid: this.form.cid,
            number: this.form.number,
            ctype: this.form.ctype,
            color: this.form.color,
            pid: this.form.pid,
            name: this.form.name,
            document: this.form.document,
            dnumber: this.form.dnumber,
            tel: this.form.tel
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
  .order-dialog-title {
    border-bottom: 1px solid #ddd;
    height: 30px;
    font-size: 16px;
    font-weight: bold;
  }
</style>
